<template>
    <div class="blog-list">
        <el-card class="box-card">
        <article>
            <div class="header">
                <h3 class="blog-title">{{blog.blog.title}}</h3>
                <div class="blog-meta">
<!--                    <span>#{{blog.blog.name}}</span>-->
                    <span>#{{blog.blog.publish}}</span>
                </div>
            </div>
            <el-divider></el-divider>

            <v-md-editor v-model="blog.blog.text" mode="preview" ></v-md-editor>
        </article>
        </el-card>
        <div class="comments" v-if="blog.blog.allowComment==1" :key="aid">
            <commentList/>
            <commentBox/>
        </div>
    </div>


</template>

<script>
    import { useRouter, useRoute } from 'vue-router';
    import {getArticleById} from "@/api/blogweb";
    import VueMarkdownEditor, { xss } from '@kangc/v-md-editor';
    import {ref,reactive,watch,computed} from 'vue';
    import { useStore } from "vuex";
    import commentBox from '@/components/Comment/index'
    import commentList from "@/components/CommentList/index"
    export default {
        name: "博客详情页",
        props:{
            aid:""
        },

        components:{commentBox,commentList},
        setup(props,context){
            const router = useRouter();
            const route = useRoute();
            const blog= reactive({blog:[]});
            console.log(route.params);
            const  params= route.params.aid;
            const aid= route.params.aid;
            //给vuex中的aid赋值
            const store = useStore();
            store.commit('setAid',aid);
            console.log(params);
            getArticleById( params).then(res=>{
                blog.blog=res.data.data;
                console.log(blog);
            })
            return{blog,aid}
        }

    }
</script>

<style scoped>

    .blog-list{
        margin-left: 16.66667%;
        width: 66.66667%;
    }
    .box-card{
        width: 800px;
        margin: 50px auto;
        padding: 15px;
        background: #fff;
        border-radius: 10px;
        background-color: #f2f2f2;

    }
    .blog-title{
        text-align: center;
        font-size: 1.5rem;
        margin: 20px auto;
    }
    .blog-meta{
        text-align: center
    }
    .comments{
        width: 800px;
        margin: 50px auto;
        padding: 15px;

    }

</style>